<template>
    <div class="all">
        <div class="top">
            <input type="button" value="总积分" class="top_left">
            <input type="button" value="年度积分" class="top_right">
        </div>
        <div class="center">
            <div class="center_left"><span>12345</span>全省的排名</div>
            <div class="center_con"><span>12345</span>服务总积分</div>
            <div class="center_right"><span>12345</span>本校本年级排名</div>
        </div>
        <div class="bottom">
            <div>
                <p>本校本年级服务标兵</p>
                <span>1200人参与报名</span>
            </div>
            <ul>
                <li v-for="(item,index) in stulist">
                    <span>{{ index+1 }} <span class="bg"></span> {{ item.stuname }}</span>
                    <span>{{item.points}}分</span>
                </li>
            </ul>
        </div>
    </div>
</template>
<script setup>
import axios from 'axios';
import {ref,onMounted} from 'vue'
let stulist=ref()
onMounted(async ()=>{
    let res=await axios.get('/stu/points').then()
    // console.log(res.data.sort((a,b)=>a.points-b.points)); //升序  b.points-a.points降序
    stulist.value=res.data.sort((a,b)=>b.points-a.points)
})
</script>
<style scoped>
    .all{
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-color: var(--bg-accent);
    }
    .top{
        width: 90%;
        height: 50px;
        background-color: var(--white);
        margin-top: 20px;
        border-radius: 10px;
        overflow: hidden;
    }
    .top_left{
        width: 50%;
        border: none;
        height: 100%;
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
        background-color: var(--primary-color);
        color: var(--white);
        font-weight: 500;
        cursor: pointer;
    }
    .top_left:hover {
        background-color: var(--primary-dark);
    }
    .top_right{
        width: 50%;
        border: none;
        height: 100%;
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
        background-color: var(--secondary-color);
        color: var(--white);
        font-weight: 500;
        cursor: pointer;
    }
    .top_right:hover {
        background-color: #3DB8B0;
    }
    .center{
        width: 90%;
        height: 100px;
        margin-top: 20px;
        background-color: var(--white);
        margin-bottom: 20px;
        border-radius: 10px;
        display: flex;
        align-items: center;
    }
    .center span{
        font-size: var(--font-xl);
        font-weight: 600;
        color: var(--primary-color);
    }
    .center_left,.center_con,.center_right{
        height: 70%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
    }
    .center_left{
        width: 35%;
        margin-left: 0%;
    }
    .center_con{
        width: 30%;
        border-left: 1px solid var(--border-color);
        border-right: 1px solid var(--border-color);
    }
    .center_right{
        width: 35%;
    }
    .center_left>div, .center_con>div, .center_right>div {
        color: var(--text-secondary);
        font-size: var(--font-sm);
        text-align: center;
        white-space: nowrap;
        line-height: 1.3;
        padding: 0 4px;
    }
    .bottom{
        width: 90%;
        flex: 1;
        background-color: var(--white);
        border-radius: 10px;
        padding: var(--spacing-md);
    }
    .bottom>div{
        display: flex;
        justify-content: space-between;
        margin-top: 15px;
        padding: 0 8px;
    }
    .bottom>div>p{
        font-size: var(--font-xl);
        font-weight: bold;
        color: var(--text-primary);
    }
    .bottom>div>span {
        color: var(--text-secondary);
        font-size: var(--font-sm);
    }
    .bottom>ul{
        padding: 0 8px;
        list-style-type: none;
    }
    .bottom>ul>li{
        height: 75px;
        display: flex;
        align-items: center;
        border-bottom: 1px solid var(--border-light);
        justify-content: space-between;
        padding: var(--spacing-sm) 0;
    }
    .bottom>ul>li:last-child {
        border-bottom: none;
    }
    .bottom>ul>li>span:nth-child(1){
        display: flex;
        align-items:center ;
        color: var(--text-primary);
        font-weight: 500;
    }
    .bottom>ul>li>span:nth-child(2) {
        color: var(--primary-color);
        font-weight: 600;
        font-size: var(--font-lg);
    }
    .bg{
        display: inline-block;
        width: 40px;
        height: 40px;
        border: 1px solid var(--primary-color);
        background: url(@/assets/OIP-C.jpg) no-repeat center/contain;
        border-radius: 50%;
        margin: 0 10px;
    }
</style>